<template>
    <view class="cu-modal bottom-modal" :class="show?'show':''">
        <view class="cu-dialog">
            <view class="cu-bar bg-white" ref="barref">
                <view class="cu-bar search bg-white" ref="serref" style="flex: 1;">
                    <view class="search-form ">
                        <text class="lg text-gray cuIcon-search"></text>
                        <input @input="f_serbxjg" v-model="search" placeholder="请输入关键字"></input>
                        <text v-show="search!=''" @click="f_emptyserch" class="lg text-gray cuIcon-close">
                        </text>
                    </view>
                </view>
                <view class="action txt-gray" @click="hideModal"><text class="lg text-gray cuIcon-close"></text>
                </view>
            </view>

            <view class="mainccc">
                <scroll-view class="select-content" scroll-y :style="{height:h+'px'}">
                    <view class="select-item" @click="f_comfirmsel(index,item)" v-for="(item,index) in searchData"
                        :key="index">
                        <view class="title" style="width: 80%;" :class="itemindex==index?'selectitem':''">{{item.label}}
                        </view>
                        <text class="lg  cuIcon-check selectIcon" v-show="itemindex==index"></text>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>

</template>
<script>
    export default {
        data() {
            return {
                h: 0,
                dt: {},
                itemobj: {},
                itemindex: 0,
                searchData: [],
                search: '',
                list: [],
                h: 0,
                show: false,
                appheight: uni.getSystemInfoSync().screenHeight
            }
        },
        computed: {

        },
        created() {

        },
        beforeDestroy() {

        },
        mounted() {
            var t = this
            // this.h = uni.upx2px(uni.getSystemInfoSync().windowHeight - 34)
            t.h = t.appheight * 0.6
        },
        methods: {
            f_emptyserch() {
                this.search = ''
                this.searchData = this.list
            },
            f_comfirmsel(i, a) {
                var t = this
                t.itemindex = i
                t.itemobj = a
                t.dt.select && t.dt.select(t.itemobj)
                t.show = false
            },
            f_serbxjg() {
                var search = this.search;
                this.searchData = []
                if (search) {
                    this.searchData = this.list.filter(function (lable) {
                        return Object.keys(lable).some(function (key) {
                            return (
                                String(lable[key])
                                    .toLowerCase()
                                    .indexOf(search) > -1
                            );
                        });
                    });
                } else {
                    this.searchData = this.list
                }
            },
            init(a) {
                console.log(a)
                var t = this
                for (let i = 0; i < a.data.arr.length; i++) {
                    const e = a.data.arr[i];
                    if (e.value == a.data.selectitem.value) {
                        t.itemindex = i
                    }
                }
                console.log(t.itemindex);
                t.dt = a
                t.show = true
                t.list = a.data.arr
                t.itemobj = a.data.selectitem
                t.searchData = a.data.arr

            },
            hideModal() {
                var t = this
                t.search = ''
                t.show = false
            },
            closexlhdet(i) {
                var t = this
                t.xlharr.splice(i, 1)
            },
            confirmXlh() {
                var t = this
                t.show = false
                t.dt.cbk && t.dt.cbk(t.itemobj)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .cu-bar {
        min-height: 70upx !important;
    }

    .cu-bar .action .iconfont {
        font-size: 60rpx;
    }

    .select-content {
        display: box;
        /* OLD - Android 4.4- */
        display: -webkit-box;
        /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;
        /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;
        /* TWEENER - IE 10 */
        display: -webkit-flex;
        /* NEW - Chrome */
        display: flex;
        -webkit-box-orient: vertical;
        /* 12版 */
        -webkit-flex-direction: columns;
        -moz-flex-direction: columns;
        -ms-flex-direction: columns;
        -o-flex-direction: columns;
        flex-direction: columns;
        /* flex-direction: column; */
        -webkit-box-align: center;
        /* 12版 */
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;
        background-color: #fff;
        /* height: 400upx; */
        overflow: auto;

        .select-item {
            width: 100%;
            font-size: $uni-font-size-base !important;
            border-bottom: 1px solid #e5e5e5;
            padding: 20rpx 20rpx;
            display: box;
            /* OLD - Android 4.4- */
            display: -webkit-box;
            /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;
            /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox;
            /* TWEENER - IE 10 */
            display: -webkit-flex;
            /* NEW - Chrome */
            display: flex;
            -webkit-box-align: center;
            /* 12版 */
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;

            .title {
                text-align: center;
                flex: 1;
            }
        }
    }

    .select-item:first-child {
        border-top: 1px solid #e5e5e5
    }

    .cu-dialog {
        background-color: #fff;
        height: 60%;
    }

    .selectIcon {
        color: $uni-color-primary;
    }

    .selectitem {
        color: $uni-color-primary;
    }

    .qx {
        font-size: $uni-font-size-base;
    }

    .qd {
        color: $uni-color-primary;
        font-size: $uni-font-size-base;
    }

    .mainccc {
        background-color: #fff;
        margin: 0 30upx;
    }

    .iconfont-close {
        font-size: $uni-font-size-lg+30rpx !important;
    }
</style>